<template>
    <div class="QrCode">
        <video ref="video" height="100%" width="100%" id="video" autoplay></video>
    </div>
    <div class="Qr_scanner">
        <div class="box">
            <div class="line_row">
                <div class="line"></div>
            </div>
            <div class="angle"></div>
        </div>
    </div>
    <van-dialog v-model:show="saoShow" style="background-color: transparent;" :showConfirmButton="false">
        <div style="display: flex;flex-direction: column;align-items: center; justify-content: center;gap: 20px;">
            <img style="width: 80px;height: 80px;" src="../../assets/img/ma.png">
            <span style="font-size: 26px;font-weight: bold;color: #4873E6;">扫码成功</span>
        </div>
    </van-dialog>
</template>

<script setup>
import { BrowserMultiFormatReader } from "@zxing/library";
import {
    ref,
    onMounted,
    onBeforeUnmount,
    reactive,

} from "vue";
import { Dialog } from "vant"
import { useRouter } from "vue-router";
const VanDialog = Dialog.Component;
const saoShow = ref(false)
let codeReader = reactive(new BrowserMultiFormatReader());
const router = useRouter();
onMounted(() => {
    openScan();
});

let openScan = async () => {
    codeReader
        .listVideoInputDevices()
        .then((videoInputDevices) => {

            console.log("videoInputDevices", videoInputDevices, "摄像头设备");
            let firstDeviceId = videoInputDevices[0].deviceId;
            // 获取第一个摄像头设备的名称
            let videoInputDeviceslablestr = JSON.stringify(
                videoInputDevices[0].label
            );
            if (videoInputDevices.length > 1) {
                // 华为手机有6个摄像头，前三个是前置，后三个是后置，第6个摄像头最清晰
                if (videoInputDevices.length > 5) {
                    firstDeviceId = videoInputDevices[5].deviceId;
                } else {
                    // 判断是否后置摄像头
                    if (videoInputDeviceslablestr.indexOf("back") > -1) {
                        firstDeviceId = videoInputDevices[0].deviceId;
                    } else {
                        firstDeviceId = videoInputDevices[1].deviceId;
                    }
                }
            }
            console.log("手机摄像头的id", firstDeviceId);
            decodeFromInputVideoFunc(firstDeviceId);
        })
        .catch((err) => { });
};

let decodeFromInputVideoFunc = (firstDeviceId) => {
    codeReader.decodeFromInputVideoDeviceContinuously(
        firstDeviceId,    // firstDeviceId  为null 时默认选择面向环境的摄像头
        "video",
        (result, err) => {
            if (result) {
                if ('vibrate' in window.navigator) {
                    window.navigator.vibrate(500);
                    saoShow.value = true
                    setTimeout(() => {
                        router.push(
                            {
                                path: "/equipmentEdit",
                                query: {
                                    textCode: result.text
                                }
                            }
                        )
                    }, 1000)
                } else {
                    if (detectDevice() == 'iOS device') {
                        saoShow.value = true
                        setTimeout(() => {
                            router.push(
                                {
                                    path: "/equipmentEdit",
                                    query: {
                                        textCode: result.text
                                    }
                                }
                            )
                        }, 1000)
                    }
                    saoShow.value = false
                }
            }
            if (err && !err) {
                console.error(err);
            }
        }
    );
};

const detectDevice = () => {
    var userAgent = navigator.userAgent || navigator.vendor || window.opera;

    // 检查安卓
    if (/android/i.test(userAgent)) {
        console.log("Android device");
        return "Android device"
        // 在这里添加针对安卓的代码
    }

    // 检查iOS
    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        console.log("iOS device");
        return "iOS device"
        // 在这里添加针对iOS的代码
    }
   
}


onBeforeUnmount(() => {
    codeReader.reset();
});
</script>

<style scoped>
.QrCode {
    width: 100vw;
    height: 100vh;
    position: relative;

    #video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}


.Qr_scanner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;

    width: 100%;
    height: 100%;

    background-color: rgba(0, 0, 0, 0.5);
}

.Qr_scanner .box {
    width: 75vw;
    height: 75vw;
    max-height: 75vh;
    max-width: 75vh;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgb(43, 113, 254);

    .line_row {
        width: 100%;
        overflow: hidden;
        background-image: linear-gradient(0deg,
                transparent 24%,
                rgba(136, 176, 255, 0.1) 25%,
                rgba(136, 176, 255, 0.1) 26%,
                transparent 27%,
                transparent 74%,
                rgba(136, 176, 255, 0.1) 75%,
                rgba(136, 176, 255, 0.1) 76%,
                transparent 77%,
                transparent),
            linear-gradient(90deg,
                transparent 24%,
                rgba(136, 176, 255, 0.1) 25%,
                rgba(136, 176, 255, 0.1) 26%,
                transparent 27%,
                transparent 74%,
                rgba(136, 176, 255, 0.1) 75%,
                rgba(136, 176, 255, 0.1) 76%,
                transparent 77%,
                transparent);
        background-size: 3rem 3rem;
        background-position: -1rem -1rem;
        animation: Heightchange 2s infinite;
        animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
        animation-delay: 1.4s;
        border-bottom: 1px solid rgba(136, 176, 255, 0.1);
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }
}

.Qr_scanner .line {
    width: 100%;
    height: 3px;
    background: #2b71fe;
    filter: blur(4px);
}

.Qr_scanner .box:after,
.Qr_scanner .box:before,
.Qr_scanner .angle:after,
.Qr_scanner .angle:before {
    content: "";
    display: block;
    position: absolute;
    width: 78px;
    height: 78px;
    border: 0.3rem solid transparent;
}

.Qr_scanner .box:after,
.Qr_scanner .box:before {
    top: -7px;
    border-top-color: #2b71fe;
}

.Qr_scanner .angle:after,
.Qr_scanner .angle:before {
    bottom: -7px;
    border-bottom-color: #2b71fe;
}

.Qr_scanner .box:before,
.Qr_scanner .angle:before {
    left: -7px;
    border-left-color: #2b71fe;
}

.Qr_scanner .box:after,
.Qr_scanner .angle:after {
    right: -7px;
    border-right-color: #2b71fe;
}

@keyframes radar-beam {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes Heightchange {
    0% {
        height: 0;
    }

    100% {
        height: 100%;
    }
}
</style>